<!DOCTYPE html>
<html class="signin no-js" lang="zh_CN">
<head>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <title>${config.siteName!}-QQ钱包支付</title>
    <meta name="keywords" content="${config.keywords!}">
    <meta name="description" content="${config.decText!}">
    <link href="/static/css/mqq_pay.css?v=1" rel="stylesheet" media="screen">
    <link  href="/static/layer/mobile/need/layer.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <script src="https://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
</head>
<body>
<div class="body">
    <h1 class="mod-title">
        <span class="ico-wechat"></span><span class="text">QQ钱包支付</span>
    </h1>
    <div class="mod-ct">
        <div class="order">
        </div>
        <div class="amount">￥${order.price!0.00}</div>
        <div class="qr-image" id="qrcode" title="${model!}"></div>
        <div class="detail" id="orderDetail">
            <dl class="detail-ct" style="display: none;">
                <dt>商家</dt>
                <dd id="storeName">${order.siteName!config.siteName!}</dd>
                <dt>购买物品</dt>
                <dd id="productName">${order.title!}</dd>
                <dt>商户订单号</dt>
                <dd id="billId">${order.outOrderId!}</dd>
                <dt>创建时间</dt>
                <dd id="createTime">${order.createTime!,dateFormat='yyyy-MM-dd HH:mm:ss'}</dd>
            </dl>
            <a href="javascript:void(0)" class="arrow"><i class="ico-arrow"></i></a>
        </div>
        <div class="tip">
            <span class="dec dec-left"></span>
            <span class="dec dec-right"></span>
            <div class="ico-scan"></div>
            <div class="tip-text">
                <p>请使用手机QQ扫一扫</p>
                <p>扫描二维码完成支付</p>
            </div>
        </div>
        <div class="tip-text">
        </div>
    </div>
    <div class="foot">
        <div class="inner">
            <p>手机用户可保存上方二维码到手机中</p>
            <p>在手机QQ扫一扫中选择“相册”即可</p>
        </div>
    </div>
</div>
</div>
</body>
<script src="/static/js/qrcode.min.js"></script>
<script src="/static/js/qcloud_util.js"></script>
<script>

    var isSafari = navigator.userAgent.indexOf("Safari") > -1;
    var tencentSeries = 'mqqapi://forward/url?src_type=web&style=default&=1&version=1&url_prefix=' + window.btoa("${model!}");
    if (isSafari) {
        location.href = tencentSeries;
    }
    else {
        var iframe = document.createElement("iframe");
        iframe.style.display = "none";
        iframe.src = tencentSeries;
        document.body.appendChild(iframe);
    }

    window.onload = loadmsg();

    var qrcode = new QRCode("qrcode", {
        text: "${model!}",
        width: 300,
        height: 300,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    // 订单详情
    $('#orderDetail .arrow').click(function (event) {
        if ($('#orderDetail').hasClass('detail-open')) {
            $('#orderDetail .detail-ct').slideUp(500, function () {
                $('#orderDetail').removeClass('detail-open');
            });
        } else {
            $('#orderDetail .detail-ct').slideDown(500, function () {
                $('#orderDetail').addClass('detail-open');
            });
        }
    });

    // 检查是否支付完成
    function loadmsg() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/payment/wx_order_state",
            timeout: 8000,
            data: {oid: '${order.id!}', "times": new Date().getDate()}, //post数据
            success: function (data, textStatus) {
                if (data.status == 2) {
                    layer.msg('支付成功，正在跳转中...', {icon: 16, shade: 0.01, time: 15000});
                    window.location.href = data.backurl;
                } else {
                    setTimeout("loadmsg()", 1500);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    setTimeout("loadmsg()", 1500);
                } else { //异常
                    setTimeout("loadmsg()", 3000);
                }
            }
        });
    }
</script>
</html>

